var leftList = document.querySelector('.left-list')
var rightList = document.querySelector('.right-list')

var items = document.querySelectorAll('.left-list .item');

function renderRadio(arr) {
    var html = '';
    arr.forEach(item => {
        html +=
            `   
        <li>
            <a href="">
                <img src="${item.img}" alt="">
                <div class="info">
                    <span class="popu">${item.title}<i></i> </span>
                    <span class="songs">${item.auth}</span>
                </div>
            </a>
        </li>
        `
    })
    rightList.innerHTML = html
}
renderRadio(allRadio)

leftList.onclick = function(e) {
    if (e.target.localName == 'li') {
        for (var i = 0; i < items.length; i++) {
            items[i].classList.remove('active')
        }
        var radio = e.target.dataset.radio;
        items[radio].classList.add('active')
        renderRadio(arr[radio])
    }
}